<script setup lang="ts">
import { PropType } from "vue";
defineProps({
  /** 标题 */
  label: { type: String, default: "" },
  /** 标题宽度 */
  labelWidth: { type: String, default: "5em" },
  /** 附加分隔符 */
  range: { type: String, default: ":" },
  labelTextAlign: { type: String as PropType<gt.textAlign>, default: "right" }
});

</script>
<template>
  <div class="Row wf x jc oh mt1em">
    <div class="label" v-if="label">{{ label }}<span v-if="range" style="margin-right: 0.4em;">{{
      range
    }}</span></div>
    <slot />
  </div>
</template>
<style lang="scss" scoped>
.Row {
  flex-shrink: 0;
  >.label {
    text-align: v-bind(labelTextAlign);
    flex: 0 0 v-bind(labelWidth);
    opacity: 0.9;
    font-weight: 600;
  }
  >:nth-child(2) {
    flex: 1;
  }
}
</style>